<template>
  <el-dialog :title='showTitle' :visible="showDialog" ref="Add"  @update:visible="$emit('update:showDialog',false)">
    <!-- 表单 -->
    <el-form label-width="120px"  ref="Add" :model="formData" :rules="rules">
      <el-form-item label="优惠劵名称" prop="couponName">
        <el-input style="width:50%" v-model="formData.couponName" />
      </el-form-item>
      <el-form-item label="优惠券金额" prop="couponAmount">
        <el-input style="width:50%"  v-model="formData.couponAmount"/>
      </el-form-item>
      <el-form-item label="发放总数量/张" prop="countNum">
        <el-input style="width:50%"  v-model="formData.countNum"/>
      </el-form-item>
      <el-form-item label="领取金额/元" prop="numAmount">
        <el-input style="width:50%"  v-model="formData.numAmount"/>
      </el-form-item>
      <el-form-item label="使用金额限制" prop="moneyLimit">
        <el-input style="width:50%"  v-model="formData.moneyLimit"/>
        <span>元（不填写即为无使用金额限制）</span>
      </el-form-item>
      <el-form-item label="使用时限" prop="potLife">
        <el-input style="width:50%" v-model="formData.potLife" />
        <span>元（不填写即为无使用时限）</span>
      </el-form-item>
      <el-form-item label="账号领取上限" prop="numLimit">
        <el-input style="width:50%" v-model="formData.numLimit" />
        <span>元（不填写即不限制领取数量）</span>
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnOK">确认</el-button>
          <el-button type="primary" size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { addCoupon, getCouponDetail, editCouponDetail } from '@/api/generalCoupon'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        couponName: '', // 优惠券名称
        couponAmount: '', // 优惠券金额
        moneyLimit: '', // 使用金额限制
        potLife: '', // 使用时限
        numLimit: '', // 账号领取上限
        countNum: '',
        numAmount: ''

      },
      rules: {
        couponName: [{ required: true, message: '优惠券名称不能为空', trigger: 'blur' }, {
          min: 4, max: 8, message: '优惠券名称为4-8位'
        }],
        couponAmount: [{ required: true, message: '优惠券金额不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showTitle () {
      return this.formData.id ? '编辑优惠券' : '新增优惠券'
    }
  },
  methods: {
    // 确认 新增优惠券
    async btnOK () {
      try {
        await this.$refs.Add.validate()
        // 调用新增接口   await addEmployee(this.formData)
        if (this.formData.id) {
          // 编辑
          await editCouponDetail(this.formData)
        } else {
          // 新增
          await addCoupon(this.formData)
        }
        // 告诉父组件更新数据
        // this.$parent 可以直接调用到父组件的实例 实际上就是父组件this
        // this.$emit
        this.$parent.getGeneralCouponList()
        this.$parent.showDialog = false
        this.formData = {
          couponName: '', // 优惠券名称
          couponAmount: '', // 优惠券金额
          moneyLimit: '', // 使用金额限制
          potLife: '', // 使用时限
          numLimit: '', // 账号领取上限
          countNum: '',
          numAmount: ''

        }
      } catch (error) {
        console.log(error)
      }
    },

    // 取消  重置原来的数据，并返回
    btnCancel () {
      this.formData = {
        couponName: '', // 优惠券名称
        couponAmount: '', // 优惠券金额
        moneyLimit: '', // 使用金额限制
        potLife: '', // 使用时限
        numLimit: '', // 账号领取上限
        countNum: '',
        numAmount: ''

      }
      this.$refs.Add.resetFields()// 重置校验结果
      this.$emit('update:showDialog', false)
    },
    // 编辑优惠券回写
    async getCouponDetail (id) {
      const result = await getCouponDetail(id)
      this.formData = result[0]
      // console.log(this.formData)
    }

  }
}
</script>

<style  scoped>
span{
    padding-left: 20px;
}
</style>
